// composables/useDevice.ts
import { ref, onMounted, onUnmounted } from "vue";

// 定义设备信息类型
export interface DeviceInfo {
  isMobile: boolean;
  isTablet: boolean;
  isDesktop: boolean;
  isIOS: boolean;
  isAndroid: boolean;
}

// 设备检测函数
const getDeviceInfo = (): DeviceInfo => {
  const userAgent = navigator.userAgent.toLowerCase();
  const width = window.innerWidth;

  return {
    isMobile: /mobile|android|iphone|ipad|ipod/i.test(userAgent) || width < 768,
    isTablet: /tablet|ipad/i.test(userAgent) || (width >= 768 && width < 1024),
    isDesktop:
      !/mobile|android|iphone|ipad|ipod/i.test(userAgent) && width >= 1024,
    isIOS: /iphone|ipad|ipod/i.test(userAgent),
    isAndroid: /android/i.test(userAgent)
  };
};

// 组合式函数
export function useDevice() {
  const device = ref<DeviceInfo>(getDeviceInfo());

  // 窗口大小变化时更新设备信息
  const updateDevice = () => {
    device.value = getDeviceInfo();
  };

  onMounted(() => {
    window.addEventListener("resize", updateDevice);
  });

  onUnmounted(() => {
    window.removeEventListener("resize", updateDevice);
  });

  return {
    device
  };
}
